<template>
    <div>
        <div class="outmain ba_f heighthv pad_20 bor_rad5">
            <div class="shuju_title mar_b20">
                <div class="shuju_title_text">
                    <span>创建超级换购活动</span>
                </div>
            </div>
            <div class="mar_t20 flex-bet flex-y-top">
                <div class="flex-g-1">
                    <el-form ref="form" :model="form" label-width="180px">
                        <el-form-item label="活动名称" :required='true' prop="name">
                            <el-input v-model="form.name" placeholder="请输入活动名称"></el-input>
                        </el-form-item>
                        <el-form-item label="活动时间" :required='true'>
                            <el-date-picker
                                    v-model="timeData"
                                    type="datetimerange"
                                    align="right"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    :default-time="['08:00:00', '20:00:00']">
                            </el-date-picker>
                        </el-form-item>
                        <!--                        <el-form-item label="换购价">-->
                        <!--                            <el-input v-model="form.name" placeholder="请输入活动价">-->
                        <!--                                <template slot="append">元</template>-->
                        <!--                            </el-input>-->
                        <!--                        </el-form-item>-->
                        <!--                        <el-form-item label="每日库存">-->
                        <!--                            <el-input v-model="form.name" placeholder="请输入每日库存数量">-->
                        <!--                                <template slot="append">份</template>-->
                        <!--                            </el-input>-->
                        <!--                        </el-form-item>-->
                        <el-form-item label="适用门店" :required='true'>
                            <el-radio-group v-model="form.storeType">
                                <el-radio label="1">仅本店可用</el-radio>
                                <el-radio label="2">全店通用</el-radio>
                                <el-radio label="3">指定门店可用</el-radio>
                            </el-radio-group>
                            <div v-show="form.storeType=='3'">
                              <el-scrollbar>
                                <div class="recordBox">
                                  <el-table ref="multipleTable" :data="shopTable" tooltip-effect="dark" style="width: 100%">
                                    <el-table-column prop="name" label="门店名称"></el-table-column>
                                    <el-table-column prop="address" label="门店地址"></el-table-column>
                                    <el-table-column label="操作">
                                      <template slot-scope="scope">
                                        <div class="textbutton">
                                          <el-button size="mini" type="text" @click="open2(scope.row,scope.$index)" class>删除</el-button>
                                        </div>
                                      </template>
                                    </el-table-column>
                                  </el-table>
                                </div>
                              </el-scrollbar>
                              <div class="addgoods textbutton">
                                <i class="el-icon-plus subjectcolor2"></i>
                                <el-button type="text" class @click="addshop(shopTable)">添加门店</el-button>
                              </div>
                            </div>
                            <div class="yb_margin lh16">全店通用、指定门店可用不适用于门店模式三</div>
                        </el-form-item>
                        <el-form-item label="适用场景" :required="true">
                          <el-checkbox-group v-model="form.useType">
                            <el-checkbox label="1">外卖</el-checkbox>
                            <el-checkbox label="2">堂食</el-checkbox>
                            <el-checkbox label="3">快餐</el-checkbox>
                          </el-checkbox-group>
                        </el-form-item>
                        <el-form-item label="每天限购次数" :required='true'>
                            <div class="time_item">
                                <el-radio v-model="form.limitType" label="1">不限次数</el-radio>
                                <el-radio v-model="form.limitType" label="2">每天换购</el-radio>
                                <span v-if="form.limitType=='2'">
                                    <el-input-number v-model="form.num" controls-position="right" :min="1"
                                                     :max="1000000"></el-input-number>
                                    <span class="mar_l10">次</span>
                                </span>
                                <div class="yb_margin lh16">每个用户每天换购的次数</div>
                            </div>
                        </el-form-item>
<!--                      <el-form-item label="适用商品" :required="true">-->
<!--                        <el-radio-group v-model="form.goodsType">-->
<!--                          <el-radio label="1">全部商品可用</el-radio>-->
<!--                          <el-radio label="2">部分商品可用</el-radio>-->
<!--                          <el-radio label="3">部分商品不可用</el-radio>-->
<!--                          <el-radio label="4">指定商品分类</el-radio>-->
<!--                        </el-radio-group>-->
<!--                      </el-form-item>-->
<!--                      <el-form-item label="选择分类" v-show="form.goodsType=='4'">-->
<!--                        <div class="">-->
<!--                          <div class="flex">-->
<!--                            <div>外卖分类：</div>-->
<!--                            <el-select v-model="goodsArr" clearable multiple filterable allow-create placeholder="请选择外卖商品分类">-->
<!--                              <el-option v-for="item in typeOptions" :key="item.id" :label="item.name" :value="item.id"></el-option>-->
<!--                            </el-select>-->
<!--                          </div>-->
<!--                          <div class="flex mar_t20" v-if="form.useType.indexOf('2')>-1 || form.useType.indexOf('3')>-1">-->
<!--                            <div>店内分类：</div>-->
<!--                            <el-select v-model="goodsArr2" clearable multiple filterable allow-create placeholder="请选择店内商品分类">-->
<!--                              <el-option v-for="item in typeOptions2" :key="item.id" :label="item.name" :value="item.id"></el-option>-->
<!--                            </el-select>-->
<!--                          </div>-->
<!--                        </div>-->
<!--                      </el-form-item>-->
                        <el-form-item label="选择换购外卖商品" prop="username" v-if="(form.useType.indexOf('1')>-1)">
                            <el-table ref="multipleTable" :data="tableData3" tooltip-effect="dark" style="width: 100%"
                                      class="tablecenter">
                                <el-table-column prop="name" label="商品">
                                    <template slot-scope="scope">
                                        <div class="flex">
                                            <div class="flex-g-0">
                                                <el-image
                                                        style="width: 60px;height: 60px;border-radius: 10px;"
                                                        :src="scope.row.icon"
                                                        fit="cover"></el-image>
                                            </div>
                                            <div class="flex-g-1 t_l">
                                                <div class="mar_l10">{{scope.row.name}}</div>
                                            </div>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="price" label="原价"></el-table-column>
                                <el-table-column prop="money" label="换购价">
                                    <template slot-scope="scope">
                                        <div class="kucun">
                                            <el-input v-model="scope.row.money" placeholder="请输入换购价">
                                                <template slot="append">元</template>
                                            </el-input>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="stock" label="库存">
                                    <template slot-scope="scope">
                                        <div class="kucun">
                                            <el-input v-model="scope.row.stock" placeholder="请输入活动库存量">
                                                <template slot="append">份</template>
                                            </el-input>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column label="操作">
                                    <template slot-scope="scope">
                                        <div class="textbutton">
                                            <el-button size="mini" type="text" @click="open1(scope.row,scope.$index)"
                                                       class="">删除
                                            </el-button>
                                        </div>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <div class="addgoods textbutton">
                                <i class="el-icon-plus subjectcolor2"></i>
                                <el-button type="text" class="" @click="addgood(tableData3)">添加商品</el-button>
                            </div>
                        </el-form-item>
                        <el-form-item label="选择换购店内商品" v-if="(form.useType.indexOf('2')>-1 || form.useType.indexOf('3')>-1)">
                          <el-table ref="multipleTable" :data="tableData4" tooltip-effect="dark" style="width: 100%"
                                    class="tablecenter">
                            <el-table-column prop="name" label="商品">
                              <template slot-scope="scope">
                                <div class="flex">
                                  <div class="flex-g-0">
                                    <el-image
                                        style="width: 60px;height: 60px;border-radius: 10px;"
                                        :src="scope.row.icon"
                                        fit="cover"></el-image>
                                  </div>
                                  <div class="flex-g-1 t_l">
                                    <div class="mar_l10">{{scope.row.name}}</div>
                                  </div>
                                </div>
                              </template>
                            </el-table-column>
                            <el-table-column prop="price" label="原价"></el-table-column>
                            <el-table-column prop="money" label="换购价">
                              <template slot-scope="scope">
                                <div class="kucun">
                                  <el-input v-model="scope.row.money" placeholder="请输入换购价">
                                    <template slot="append">元</template>
                                  </el-input>
                                </div>
                              </template>
                            </el-table-column>
                            <el-table-column prop="stock" label="库存">
                              <template slot-scope="scope">
                                <div class="kucun">
                                  <el-input v-model="scope.row.stock" placeholder="请输入活动库存量">
                                    <template slot="append">份</template>
                                  </el-input>
                                </div>
                              </template>
                            </el-table-column>
                            <el-table-column label="操作">
                              <template slot-scope="scope">
                                <div class="textbutton">
                                  <el-button size="mini" type="text" @click="open4(scope.row,scope.$index)"
                                             class="">删除
                                  </el-button>
                                </div>
                              </template>
                            </el-table-column>
                          </el-table>
                          <div class="addgoods textbutton">
                            <i class="el-icon-plus subjectcolor2"></i>
                            <el-button type="text" class="" @click="addgood4(tableData4)">添加商品</el-button>
                          </div>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="flex-g-0 pad_lr_20">
                    <div class="fon_16">常见问题</div>
                    <el-collapse v-model="collapseName" accordion class="mar_tb10" style="width: 260px">
                        <el-collapse-item title="什么是超级换购？" name="1">
                            <div>针对门店用户进行的超级换购活动，用户在下单时可选择超级换购商品活动。</div>
                        </el-collapse-item>
                        <el-collapse-item title="为什么要做超级换购？" name="2">
                            <div>提高新客转化：设置超级换购活动后，可提升新用户下单转化率</div>
                        </el-collapse-item>
                        <el-collapse-item title="哪些用户可以享受超级换购" name="3">
                            <div>可自行设置哪些用户享受该优惠</div>
                        </el-collapse-item>
                    </el-collapse>
                    <div class="fon_16 mar_t20">活动规则</div>
                    <div class="color_9 mar_t10 lh30 fon_13">
                        <div>1.活动仅限在线支付订单；</div>
                        <div>2.活动成本由商家承担，与店铺其他活动默认同享</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="mar_t20 ba_f pad_20 t_c">
            <el-button type="primary" @click="submitForm">立即创建</el-button>
        </div>
        <edit ref="edit" @fetchData="tableData" @fetchData2="tableData2"></edit>
      <shopEdit ref="ShopEdit" @fetchData="shopListData"></shopEdit>
    </div>
</template>
<script>
    import {postSaveChangePay, getSaveChangePay} from "@/api/plug";
    import {changeDate} from "@/utils/index";
    import shopEdit from '@/views/plugin/plug/components/selectshop';
    import Edit from "./components/selectgood";

    export default {
        components: {Edit,shopEdit},
        created() {
            if (this.$route.query.id) {
                this.id = this.$route.query.id
                this.edit()
            }
        },
        data() {
            return {
                form: {
                    name: '',
                    storeType: '1',
                    useType: ['1'],
                    goodsType: '1',
                    limitType: '1',
                    num: '',
                },
                tableData3: [],
                tableData4: [],
                timeData: [new Date(), new Date().setMonth(new Date().getMonth() + 3)],
                collapseName: '',
                shopTable: [],
            }
        },
        methods: {
          async shopListData(data) {
            this.shopTable = data ? data : [];
          },
          open2(row, index) {
            this.$delete(this.shopTable, index);
          },
          addshop(row) {
            if (row) {
              const storeIds = row.map((item) => item.id);
              this.$refs['ShopEdit'].showEdit(storeIds);
            } else {
              this.$refs['ShopEdit'].showEdit();
            }
          },
            tableData(tableData) {
                this.tableData3 = tableData
                if (this.id) {
                    // this.tableData3 = this.form.goodsArr.concat(tableData)
                    // this.tableData3 = this.repeat(this.tableData3,tableData)
                    // this.tableData3 = this.tableData3.filter(function (val) { return tableData.indexOf(val) > -1 })
                    // this.tableData3 = this.tableData3.filter(function (val) { return !(tableData.indexOf(val) > -1) }).concat(this.tableData3)
                    // this.tableData3 =  this.tableData3.concat(tableData)
                }
            },
            tableData2(tableData){
              this.tableData4 = tableData;
            },
            open1(row, index) {
                this.$delete(this.tableData3, index)
            },
            open4(row, index) {
              this.$delete(this.tableData4, index);
            },
            addgood(row) {
              this.$refs['edit'].isGoodsInfo ('1');
                if (row) {
                    const id = row.map((item) => item.id);
                    this.$refs["edit"].showEdit(id);
                } else {
                    this.$refs["edit"].showEdit();
                }
                this.$refs["edit"].isSpec('2');
            },
          addgood4(row) {
            this.$refs['edit'].isGoodsInfo ('2');
            if (row) {
              const id = row.map((item) => item.id);
              this.$refs['edit'].showEdit(id);
            } else {
              this.$refs['edit'].showEdit();
            }
            this.$refs['edit'].isSpec('');
          },
            async edit() {
                const {data} = await getSaveChangePay({id: this.id})
                this.form2 = this.form
                this.form = Object.assign(this.form2, data);
                if (data.startTime) {
                    this.timeData = [data.startTime, data.endTime]
                }
                if (data.goodsArr) {
                    this.tableData3 = data.goodsArr
                    this.tableData4 = data.goodsArr2 ? data.goodsArr2 : [];
                }
                if (data.storeInfo) {
                  this.shopTable = data.storeInfo ? data.storeInfo : [];
                }
            },
            enter(i = 0) {
                this.$refs['imgicon' + i].style.display = 'none'
            },
            leave(i = 0) {
                this.$refs['imgicon' + i].style.display = 'inline-block'
            },
            test(i = 0) {
                console.log(this.$refs, i)
                this.$refs['img' + i].dialogVisible = true
            },
            imgadd1(url) {
                this.form.icon = url.str
            },
            deleteMultiImage(item, index, type) {
                //typem没传是单图multigraph多图；index上传图片组件排序
                Array.prototype.remove = function (val) {
                    var index = this.indexOf(val);
                    if (index > -1) {
                        this.splice(index, 1);
                    }
                };
                if (type == 'multigraph') {
                    switch (index) {
                        case 2:
                            this.form2.environment.remove(item);
                            break
                    }
                } else {
                    switch (index) {
                        case 1:
                            this.form.icon = '';
                            break
                    }
                }
            },
            async submitForm() {
                this.$refs["form"].validate(async (valid) => {
                    if (valid) {
                        if (this.timeData) {
                            this.form.startTime = changeDate(this.timeData[0]);
                            this.form.endTime = changeDate(this.timeData[1]);
                        }
                        if (this.tableData3) {
                            for (let i = 0; i < this.tableData3.length; i++) {
                                console.log(this.tableData3[i])
                                if (+this.tableData3[i].money > +this.tableData3[i].price) {
                                    this.$baseMessage('换购价应大于原价', "error");
                                    return
                                }
                                if (!this.tableData3[i].money || this.tableData3[i].money == '0' || this.tableData3[i].money == 'NaN') {
                                    this.$baseMessage('换购价不能为空或零', "error");
                                    return
                                }
                            }
                        }
                        if (this.tableData4) {
                          for (let i = 0; i < this.tableData4.length; i++) {
                            console.log(this.tableData4[i])
                            if (+this.tableData4[i].money > +this.tableData4[i].price) {
                              this.$baseMessage('换购价应大于原价', "error");
                              return
                            }
                            if (!this.tableData4[i].money || this.tableData4[i].money == '0' || this.tableData4[i].money == 'NaN') {
                              this.$baseMessage('换购价不能为空或零', "error");
                              return
                            }
                          }
                          // this.form.goodsArr2 = this.tableData4.map((item) => item.id);
                        }
                        if (this.shopTable) {
                          this.form.storeArr = this.shopTable.map((item) => item.id);
                        }
                        this.form.goodsArr = this.tableData3
                        this.form.goodsArr2 = this.tableData4
                        const {msg} = await postSaveChangePay(this.form);
                        this.$baseMessage(msg, "success");
                        this.$router.go(-1)
                    } else {
                        return false;
                    }
                });
            },
        }
    }
</script>
<style lang="scss">
    .time_item .el-input {
        width: 180px;
    }

    .kucun .el-input {
        width: 200px;
    }
</style>
